<template>
  <div>
    <el-dialog
      :visible="true"
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="90%">
      <span slot="title" class="dialog-footer">
        <van-icon name="down" class="jiantou" size="8.333vw" @click="go"/>
        <span style="font-weight: bold;font-size:18px;">{{$t('cExport.packingDetail')}}</span>
      </span>
      <div class="content-height">
        <!-- 装箱单字段 -->
        <div class="content">
          <div><span class="content-one">{{$t('cExport.packing')}}:</span> <span class="content-two">{{shipmentObj.shipmentNumber}}</span></div>
          <div><span class="content-one">{{$t('cArroval.aog')}}:</span> <span class="content-two">{{shipmentObj.aog}}</span></div>
          <div><span class="content-one">{{$t('cExport.allBox')}}:</span> <span class="content-two">{{shipmentObj.totalBoxes}}</span></div>
          <div><span class="content-one">{{$t('cExport.allCount')}}:</span> <span class="content-two">{{shipmentObj.totalShippedQuantity}}</span></div>
          <div><span class="content-one">{{$t('cExport.allGross')}}:</span> <span class="content-two">{{shipmentObj.totalBoxWeight}}</span></div>
          <div><span class="content-one">{{$t('cExport.allPrice')}}:</span> <span class="content-two">{{shipmentObj.totalDeclaredValue}}</span></div>
          <div><span class="content-one">{{$t('cExport.originHarbor')}}:</span> <span class="content-two">{{shipmentObj.originCountry}}</span></div>
          <div><span class="content-one">{{$t('cExport.port')}}:</span> <span class="content-two">{{shipmentObj.destinationCountry}}</span></div>
          <div><span class="content-one">{{$t('cTransportSearch.receivePeople')}}:</span> <span class="content-two">{{shipmentObj.receiver}}</span></div>
          <div class="content-last"><span class="content-one">{{$t('cExport.address')}}:</span> <span class="content-two">{{shipmentObj.address}}</span></div>
        </div>
        <!-- 货物列表详情 -->
        <div class="listDetail">
          <div class="top" @click="handleListDetail">
            <span style="font-size:5vw;font-weight: bold;">{{$t('cExport.exportList')}}</span>
            <i v-if="!listDetail" class="el-icon-arrow-down" style="font-size: 5vw;padding-left: 2.778vw"></i>
            <i v-else class="el-icon-arrow-up" style="font-size: 5vw;padding-left: 2.778vw"></i>
          </div>
          <div class="list-bottom" v-if="!listDetail">
            <div class="box" v-if="shipmentObj.queryList && shipmentObj.queryList.length !== 0">
              <div class="box-content" v-for="(item,index) in shipmentObj.queryList" :key="index">
                <div class="box-content-text">
                  <span>{{$t('cExport.boxNum')}}: <span>{{item.boxNumber}}</span></span>
                  <span>{{$t('cExport.contract')}}: {{item.contractNo}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cExport.contarctType')}}: {{item.contarctType}}</span>
                  <span>{{$t('cExport.purchasingClerk')}}: {{item.purchasingClerk}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cTransportSearch.partNum')}}: {{item.partNumber}}</span>
                  <span>{{$t('cTransportSearch.serialNum')}}: {{item.serialNumber}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cExport.chineseName')}}: {{item.chnCargoName}}</span>
                  <span>{{$t('cExport.englishName')}}: {{item.engCargoName}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cExport.shippedQuantity')}}: {{item.shippedQuantity}}</span>
                  <span>{{$t('cTransportSearch.danger')}}: {{item.dangerousGoods}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cExport.weight')}}: {{item.netWeight}}</span>
                  <span>{{$t('cExport.price')}}: {{item.declaredValue}}</span>
                </div>
                <div class="box-content-text">
                  <span>{{$t('cExport.currency')}}: {{item.currency}}</span>
                  <span>{{$t('cTransportSearch.size')}}: {{item.size}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomBtn">
        <el-button type="primary" v-if="thing === 0" @click="handleDelete">{{bottomBtn}}</el-button>
        <el-button v-if="thing !== 0" @click="handleDelete">{{$t('btn.cancelTihuo')}}</el-button>
        <el-button type="primary" v-if="thing !== 0" @click="handleAddList">{{$t('btn.addList')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $export } from "@/api/export"
export default {
  props: {
    thing: {
      type: Number,
      default() {
        return 0
      }
    },
    wareObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      listDetail: false,
      bottomBtn: '撤销提货',
      shipmentObj: {}
    }
  },
  methods: {
    // 控制详情框的显示与隐藏
    go() {
      this.$emit('handleClose')
    },
    // 控制显示与隐藏货物列表数据
    handleListDetail() {
      this.listDetail = !this.listDetail
    },
    // 撤销提货
    handleDelete() {
      const arr = []
      arr.push(this.wareObj.shipmentNumber)
      $export.deleteWarehouse(arr)
             .then(res => {
               if (res.status === 200) {
                 this.$msg.success(res.message)
                 this.$emit('handleClose',this.wareObj.shipmentNumber)
                 this.$emit('handleDelete',this.wareObj.shipmentNumber)
               }
               else {
                 this.$msg.fail(res.message || res.msg || this.$t('message.noTry'))
               }
             })
             .catch(err => {
               this.$msg.fail(err.message || err.msg || this.$t('message.noTry'))
             })
    },
    // 加入提货列表
    handleAddList() {
      this.$emit('handleAddList',this.shipmentObj)
    }
  },
  created() {
    this.shipmentObj = this.wareObj
  }
}
</script>

<style scoped>
.content-height {
  width: 100%;
  height: 65vh;
  overflow-y: scroll;
}
/* 装箱单详情 */
.jiantou {
  transform: rotate(90deg);
  margin-right: 10px;
}
.dialog-footer {
  display: flex;
  align-items: center;
}
.content-one {
  font-weight: bold;
  color: black;
}
.content-last {
  display: flex;
}
.content-last .content-one {
  flex: 2;
}
.content-last .content-two {
  padding-left: 1px;
  flex: 5;
}
.content-two {
  padding-left: 10px;
}
/deep/.el-dialog {
  margin-top: 8vh !important;
}
/deep/.el-dialog__body {
  padding: 0 10px !important;
  font-size: 15px;
}
/deep/.el-dialog__header {
  padding: 10px !important;
}
/* 货物列表 */
.one {
  display: flex;
  font-size: 15px;
}
.one div {
  flex: 1;
}
.one-text {
  font-weight: bold;
}
.one div span:nth-child(2) {
  text-indent: 7px;
}
.one div:last-child {
  display: flex;
}
.two {
  display: flex;
}
.two span:nth-child(1) {
  width: 22.833vw;
}
.two span:nth-child(2) {
  flex: 1;
}
/* 货物列表详情 */
.listDetail .top {
  margin: 2.778vw 0;
}
.box {
  padding: 0 2.778vw;
  font-size: 13px;
  border: 1px solid #797979;
  border-radius: 5px;
}
.box-content {
  padding: 2.778vw 0;
  border-bottom: 0.278vw dashed #797979;
}
.box-content:last-child {
  border-bottom: 0;
}
.box-content-text {
  display: flex;
}
.box-content-text span {
  flex: 1;
}
.bottomBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 5px 0;
  padding-bottom: 5px;
}
.bottomBtn .el-button {
  flex: 1;
}
</style>
